<template>
    <!-- html -->
    <div class="person">
        <h3>this is person</h3>
        <h3>{{ name }}</h3>
        <h3>{{ age }}</h3>
        <button @click="updateName">修改年龄</button>
        <button @click="updateAge">修改名字</button>
        <button @click="showtel">查看联系方式</button>
    </div>
</template>

<!-- <script lang="ts">
// js或者ts
export default {
    name: 'Person'  //组件名
}
</script> -->


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Person'>
import { ref } from 'vue'

//基本类型数据
//ref可以定义： 基本类型响应式数据 和 对象类型的响应式数据
let name = ref('张三')
let age = ref(18)
let tel = '1388888888888'

//对象类型数据


function showtel() {
    console.log(tel)
}
function updateAge() {
    name.value = name.value + 1
}
function updateName() {
    age.value = age.value + 1
}
</script>

<style>
/* 样式 */
.person {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>